<style scoped>
.repertory-data-table {
  margin-top: 12px;
}
.repertory-data-table .data-list {
  margin-top: 12px;
  min-height: 80px;
}
.data-list {
  height: 100%;
}
</style>
<!-- 数据 -->
<template>
  <div
    class="repertory-data-table"
    v-loading="loading"
  >
    <!-- 数据列表 -->
    <div class="data-list">
      <DataList
        :where="where"
        :page="page"
        :changeLoading="changeLoading"
        :dataTotal="dataTableTotal"
        ref="repertoryDataList"
      />
    </div>
    <!-- 分页 -->
    <div style="float:right;">
      <PageTurning
        :total="page.total"
        :changePage="changePage"
      />
      <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
// 分页组件
import PageTurning from '@/components/common/PageTurning.vue'
import DataList from '@/components/main/user/repertory/refuse/DataList.vue'
export default {
  props: {
    where: {
      type: Object
    },
    dataTotal: {
      type: Function
    }
  },
  data () {
    return {
      // 加载
      loading: false,
      // 分页, 当赋值总数大于0时开始显示分页
      page: { page: 1, size: 12, total: 0 }
    }
  },
  watch: {
    where: {
      handler () {
        this.$nextTick(() => {
          this.resetData()
        })
      },
      deep: true
    },
    page: {
      handler () {
        this.$nextTick(() => {
          this.resetData()
        })
      },
      deep: true
    }
  },
  methods: {
    resetData () {
      if (this.loading) {
        return
      }
      this.$refs['repertoryDataList'].resetData()
    },
    // 改变分页时
    changePage (page) {
      this.page = JSON.parse(JSON.stringify(page))
    },
    // 给子级操作 loading
    changeLoading (bool) {
      this.loading = bool
    },
    dataTableTotal (total) {
      this.page.total = total
      this.dataTotal(total)
    }
  },
  components: {
    PageTurning,
    DataList
  }
}

</script>
